<template>
	<view>
		<view>
			<form>
				<view class="cu-form-group">
					<text class="title">检验类型</text>
					<view class="txt">{{type}}</view>
				</view>
				<picker @change="bindGongxuChange" :value="indexGongxu" :range="gongxuPickerList">
				    <view class="cu-form-group">
				    	<text class="title">工序</text>
				    	<text v-if="indexGongxu == -1" class="cuIcon-right"></text>
				    	<view v-else>{{gongxuPickerList[indexGongxu]}}</view>
				    </view>
				</picker>
				<view class="cu-form-group">
					<text class="title">样本</text>
					<input class="txt" placeholder="请输入" name="sample"  v-model="sample"></input>
				</view>

				<view class="uni-form-item uni-column">
					<text class="title">检验描述</text>
					<textarea placeholder="请详细描述你的问题和意见..." class="feedback-textare" name="description" v-model="description" />
					</view>

				<view class="feedback-body feedback-uploader">
				    <view class="uni-uploader">
				        <view class="uni-uploader-head">
				            <view class="uni-uploader-title">上传图片</view>
				        </view>
				        <view class="uni-uploader-body">
				            <view class="uni-uploader__files">
				                <block v-for="(image,index) in imageList" :key="index">
				                    <view class="uni-uploader__file" style="position: relative;">
				                        <image class="uni-uploader__img"  :src="image" @tap="previewImage"></image>
				                        <view class="close-view" @click="close(index)">x</view>
				                    </view>
				                </block>
				                <view class="uni-uploader__input-box" v-show="imageList.length < 8">
				                	<view class="uni-uploader__input" @tap="chooseImg"></view>
				                </view>
				            </view>
				        </view>
				    </view>
				</view>

				<view class="padding flex flex-direction">
					<button class="cu-btn bg-green lg"  @click="send">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {ACCESS_TOKEN} from '@/common/util/constants.js'
	export default {
		data() {
			return {
				msgContents:['组装','焊接','切割','钣金','焊装','涂装','总装'],
				imageList:[],
				imgurl:'',
				description:"",
				sample:"",
				vornr:"",
				picture:"",
				time:"",
				type:"工序检验",
				List:[],//字典
				gongxuPickerList: [],
				gongxuList: [],
				indexGongxu: 0,
				ls_baseUrl:'',
			}
		},
		onShow() {
			this.ls_baseUrl = uni.getStorageSync('ls_baseUrl')
			console.log(uni.getStorageSync(ACCESS_TOKEN))
			this.dictList();
		},
		onLoad() {
			var date =new Date();
			var year = date.getFullYear();
			var month= date.getMonth()+1;
			var day= date.getDate();
			var currentDate = year+"-"+month+"-"+day;
			this.time=currentDate;
		},
		methods: {
			bindGongxuChange(e) {
				this.indexGongxu = e.target.value
			},
			dictList() {
				this.List = [];
				this.gongxuPickerList = [];
				let url = '/dict/getOptionsByList'
				this.$http.post(url,
					[
								{
								  remark:'1',
								  code:'operation_code',
								  text:'operation_name',
								  table:'mc_operation',//工序
								},
			    	]
				).then(res => {
					if (res.data.success) {
						if (res.statusCode == "200") {
							this.List = res.data.result;
							this.List[1].forEach((e) => {
								this.gongxuPickerList.push(
									e.text,
								);
							});
						} else {
							// 数据获取失败
						}

					}
				}).catch(err => {
					console.log(err);
				});

			},
			close(e){
			    this.imageList.splice(e,1);
			},
			chooseImg() { //选择图片
			    uni.chooseImage({
					count:1,
			        sourceType: [ "album","camera"],
			        sizeType: "compressed",
			        success: res => {
			            this.imageList = res.tempFilePaths;
						console.log(res.tempFilePaths)
						uni.uploadFile({
							header: {
								"X-Access-Token": uni.getStorageSync(ACCESS_TOKEN),
								"tenant-id":uni.getStorageSync("tenantId")
							},
						    url: this.ls_baseUrl+'/sys/common/upload', //接口地址
						    filePath: res.tempFilePaths[0],
						    name: 'file',
						    formData: {
						        'biz': 'temp'  ,// 上传附带参数
						    },
						    success: (res) => {
								this.imgurl = JSON.parse(res.data).message;
						    },
						});
			        }
			    })
			},
			previewImage() { //预览图片
			    uni.previewImage({
			        urls: this.imageList
			    });
			},
			send(){
				if (this.indexGongxu==-1) {
					this.$tip.alert('请选择工序');
					return;
				}
				if(this.sample==''){
					this.$tip.alert('请输入样本');
					return;
				}
				if(this.description==''){
					this.$tip.alert('请输入检验描述');
					return;
				}
				let url = '/inspection/inspection/add'
				this.$http.post(url,
				{
					"inspDate":this.time,
					 "inspType":"pqc",
					 "sampleAndResult":[
						{
					 	  "vornr":this.List[1][this.indexGongxu].value,
					 	  "sample":this.sample,
					 	  "description":this.description,
					 	  "picture":this.imgurl
					 	}
					 ]
				},{emulateJSON: true}).then(res => {
					if (res.data.success) {
						if (res.statusCode == "200") {
							uni.showToast({
								// icon: 'none',
								title: '保存成功'
							});
						}
						this.sample='';
						this.description='';
						this.imageList=[];
						this.imgurl='';

					}

				}).catch(err => {
					console.log(err);
				});

		 }
}
}
</script>
<style>
	page {
	    background-color: #EFEFF4;
	}
	.head {
		display: flex;
		justify-content: center;

	}
	.floor-one {
		width: 90%;
		margin-left: 5%;
		border: solid 1px blue;
	}

	.lab {
		width: auto;
		font-size: 125%;
		border-bottom: #C0C0C0 1px solid;
	}
	.feedback-textare{
		background-color:#FFFFFF;
	}
    .input-view {
        font-size: 28upx;
    }
    .close-view{
        text-align: center;
		line-height:14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
    }
	.title{
		font-size: 125%;
	}
	.cu-form-group {
		width: 100%;
		background-color: #ffffff;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;

	}
	.txt{
		text-align: right;
	}
	.cuIcon-right{
		color: #CBCFD5;
	}
</style>
